<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<security:csrfMetaTags/>
<script type="text/javascript">
    $(function(){
        $("#toRightBtn").click(function(){

            // select是标签选择器
            // :eq(0)表示选择页面上的第一个 (第一个select标签)
            // :eq(1)表示选择页面上的第二个
            // “>”表示选择子元素
            // :selected表示选择“被选中的”option
            // appendTo()能够将jQuery对象追加到指定的位置 整个option标签添加 包含标签中的各种数据（角色名称，角色ID）
            $("select:eq(0)>option:selected").appendTo("select:eq(1)");
        });

        $("#toLeftBtn").click(function(){
            $("select:eq(1)>option:selected").appendTo("select:eq(0)");
        });

        $("#submitBtn").click(function(){
            // 在提交表单前把“已分配”部分的option全部选中
            $("select:eq(1)>option").prop("selected","selected");
        });
    });
</script>
<body>

<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
    <div class="row">
        <%@ include file="/WEB-INF/include-sidebar.jsp"%>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
<%--                 action="assign/do/role/assign.html" 提交表单   --%>
                    <form action="assign/do/role/assign.html" method="post" role="form" class="form-inline">
                      <security:csrfInput/>
                        <%--隐藏域 从admin-page.jsp传过来 来这个页面都是同一请求 从请求参数中取即可
                        include-sideber --> AdminHandler.getPageInfo -->admin.page -->AssignHandler.toAssignRolePage -->assign-role                        --%>
                        <input type="hidden" name="adminId" value="${param.adminId }" />
                        <input type="hidden" name="pageNum" value="${param.pageNum }" />
                        <input type="hidden" name="keyword" value="${param.keyword }" />
                        <div class="form-group">
                            <label for="exampleInputPassword1">未分配角色列表</label><br>
                            <select
                                    class="form-control" multiple="multiple" size="10"
                                    style="width: 100px; overflow-y: auto;">
                                <c:forEach items="${requestScope.unAssignedRoleList }" var="role">
                                    <option value="${role.id }">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="toRightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="toLeftBtn" class="btn btn-default glyphicon glyphicon-chevron-left"
                                    style="margin-top: 20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left: 40px;">
                            <label for="exampleInputPassword1">已分配角色列表</label><br>
<%--                           需要提交的--%>
<%--                            这里如何封装的roleIdList 给select标签指定名称 在handler中使用@RequestParam接收
                                       在form表单中提交的数据都可以通过name属性获得其标签体的值（内容）
                                       这里select标签中嵌套<option>标签 可以获得<option>标签中value属性的值即role.id

--%>
                            <select
                                    name="roleIdList"
                                    class="form-control" multiple="multiple" size="10"
                                    style="width: 100px; overflow-y: auto;">
                                <c:forEach items="${requestScope.assignedRoleList}" var="role">
                                    <option value="${role.id }">${role.name }</option>
                                </c:forEach>
                            </select>
                        </div>
                        <button id="submitBtn" type="submit" style="width: 150px;" class="btn btn-lg btn-success btn-block">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>